<template>
    <div class="card-wrap">
      <var-card ripple>
        <template #title>
          <div class="info-wrap">
            <var-divider description="个人信息" />
          </div>
          <div class="avatar-wrap">
            <div class="flex-item">
              <var-avatar :src="userInfo.base64" :size="78" />
            </div>
            <h2>{{ userInfo.chinaname }}</h2>
          </div>
          <div class="infos">
            <p class="title">
              邮箱:
              <var-ellipsis style="max-width: 170px">
                {{ userInfo.email }}
              </var-ellipsis>
            </p>
            <p class="title">
              用户:
              <var-ellipsis style="max-width: 170px">
                {{ userInfo.name }}
              </var-ellipsis>
            </p>
            <p class="title">
              角色:
              <var-ellipsis style="max-width: 170px">
                {{ role }}
              </var-ellipsis>
            </p>
            <p class="title">
              场次:
              {{ count }}
            </p>
            <p class="title">金币: {{ userInfo?.integral }}</p>
          </div>
        </template>
      </var-card>
      <!-- 标题 -->
      <div class="title-wrap">
        <p>解说场次<var-icon name="format-list-checkbox" /></p>
        <div class="warning-text">温馨提示：取消选班则-10金币</div>
      </div>
      <!-- 列表 -->
      <div class="list-wrap">
        <div
          class="box"
          v-ripple
          v-if="myList.length !== 0"
          v-for="item in myList"
        >
          <var-ellipsis style="max-width: 300px">
            <p>
              <span class="content game"
                >{{ item.team1_name }} vs {{ item.team2_name }}</span
              >
            </p>
          </var-ellipsis>
          <p>
            <span class="content">{{ handleTime(item.opentime) }}</span>
          </p>
          <var-ellipsis style="max-width: 300px">
            <p style="display:flex;justify-content:space-between;align-items:center">
              <span class="content">{{ item.belong }}</span>
              <span class="content">{{ item.tag }}</span>
            </p>
          </var-ellipsis>
          <div class="btn-wrap">
            <var-button
              block
              type="danger"
              size="small"
              :disabled="checkIsPass(item.opentime)"
              @click="cancelMyGame(item.id)"
              >取消
            </var-button>
          </div>
        </div>
        <div v-else>
          <p class="noData">太懒惰了，一个场次都没有？</p>
        </div>
      </div>
      <!-- 积分排名 -->
      <div class="title-wrap">
        <p>积分排名<var-icon name="format-list-checkbox" /></p>
      </div>
      <div class="list-wrap">
        <table>
          <thead>
            <th>中文名</th>
            <th>积分</th>
          </thead>
          <tbody>
            <tr v-for="item in rankList" :key="item.id">
              <td width="50%">{{ item.chinaname }}</td>
              <td width="50%">{{ item.integral }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <var-popup :default-style="false" v-model:show="success">
        <var-result
          class="result"
          type="success"
          title="成功"
          description="成功取消了该场比赛的解说！"
        >
          <template #footer>
            <var-button type="success" @click="success = false"
              >确认</var-button
            >
          </template>
        </var-result>
      </var-popup>
      <var-overlay v-model:show="overlayShow">
        <div class="overlay-content">
          <li></li>
          <li></li>
          <li></li>
        </div>
      </var-overlay>
    </div>

</template>

<script setup lang="ts">
interface UserInfo {
  chinaname?: string;
  name?: string;
  email?: string;
  roles?: string[];
  officium?: string;
  integral?:number | null;
  base64?: string;
}
const userInfo = reactive<UserInfo>({});
const overlayShow = ref(false);
onMounted(() => {
  overlayShow.value = true;
  if (sessionStorage.getItem("authorization") !== "0") {
    initInfos();
    getMySchedules();
    getMyCounts();
    initRanking();
  }
});
const initInfos = ()=>{
  getUserInfo()
    .then((res) => {
      if(res.data.integral === null){
        createAction()
      }
      userInfo.chinaname = res.data.chinaname;
      userInfo.name = res.data.name;
      userInfo.email = res.data.email;
      userInfo.roles = res.data.roles;
      userInfo.officium = res.data.officium;
      userInfo.base64 = res.data.base64;
      userInfo.integral = res.data?.integral;
      overlayShow.value = false;
    })
    .catch((err) => {
      console.log(err);
      overlayShow.value = false;
    });
}
const checkIsPass = (time:string)=>{
  if(new Date() > new Date(time)){
    return true;
  }else{
    return false;
  }
}
//生成对话框
const createAction = async()=>{
  setIntegral[await Dialog('该版本新增了积分模式，积分可以兑换奖励，是否开通积分模式？')]()
}
const role = computed(() => {
  if (userInfo.roles?.includes("nbadmin")) {
    return "超级管理员";
  } else if (userInfo.roles?.includes("admin")) {
    return "赛事组成员";
  } else if (
    userInfo.roles?.length === 0 &&
    userInfo.officium === "Commentator"
  ) {
    return "ASG常驻解说";
  } else {
    return "游客";
  }
});
// 获得我的场次
const count = ref(0);

const getMyCounts = () => {
  getMyCount().then((res) => {
    count.value = res.data;
  });
};

// 获取我的场次
const myList = reactive<any[]>([]);
const getMySchedules = () => {
  getMyGame().then((res) => {
    myList.length = 0;
    res.data.forEach((items: any) => {
      myList.push(items);
    });
  });
};
// 处理时间
const handleTime = (value: string) => {
  const year = value.slice(0, 4);
  const month = value.slice(5, 7);
  const day = value.slice(8, 10);
  const time = value.slice(11, 19);
  return year + "/" + month + "/" + day + " " + time;
};
// 取消场次
const success = ref(false);
const bizId = ref("");
// 处理开启
const setIntegral = {
  confirm:()=>setPoints(),
  cancel: () => Snackbar.info("关闭"),
  close: () => Snackbar.info("关闭"),
}
const setPoints =()=>{
  openPoints().then(()=>{
    initInfos();
    Snackbar.success("开启成功！");
  })
  .catch((err)=>{
    Snackbar.error(err);
  })
}
const actions = {
  confirm: async function fn() {
    overlayShow.value = true;
    await deleteGame(bizId.value).then(() => {
      overlayShow.value = false;
      success.value = true;
      initInfos();
      getMySchedules();
      getMyCounts();
    })
    .catch(err=>{
      overlayShow.value = false;
      Snackbar.error(err.response.data.message);
    })
  },
  cancel: () => Snackbar.info("关闭"),
  close: () => Snackbar.info("关闭"),
};
async function cancelMyGame(id: string) {
  bizId.value = id;
  actions[
    await Dialog(
      "是否确认取消解说这场比赛？取消解说场次会扣除十金币，是否确认？"
    )
  ]();
}
interface rank{
  chinaname?:string,
  id:number,
  integral?:number
}
// 获取积分排名榜
const rankList = ref<rank[]>([]);
async function initRanking(){
   const res = await getRanking();
   console.log("@",res.data);
   rankList.value = res.data
}
</script>

<style scoped lang="less">
.card-wrap {
  height:100dvh;
  padding: 20px 10px;
  overflow-y: auto;

  .title-wrap {
    display: flex;
    justify-content: start;
    gap: 6px;
    align-items: center;
    margin: 10px 0;
    padding-left: 10px;
    border-left: 5px solid @lightColor;
    p {
      color: @lightColor;
    }
  }
  .list-wrap {
  }
}
.avatar-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  margin: 10px;
  .flex-item {
    margin: 0 20px;
  }
}
.info-wrap {
  padding: 10px;
}
.infos {
  margin-top: 10px;
  padding: 0 30px;
}
.noData {
  margin-top: 5px;
  text-align: center;
}
.box {
  box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.1);
  height: 120px;
  padding: 10px;
  border: 1px solid @borderColor;
  margin: 10px 0;
  border-radius: 5px;
}
.btn-wrap {
  text-align: center;
  width: 100%;
  margin-top: 5px;
}
.content {
  color: #7f7f7f;
  margin-left: 10px;
}
.content.game {
  font-weight: bold;
  color: @darkTextColor;
}
.overlay-content {
  padding: 20px 24px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    list-style: none;
    margin: 1px;
    transition: 0.3s;
    &:nth-child(1) {
      transform: translateY(5px);
      animation: moveSide 1s infinite;
    }
    &:nth-child(2) {
      transform: translateY(-5px);
      animation: moveMiddle 1s infinite;
    }
    &:nth-child(3) {
      transform: translateY(5px);
      animation: moveSide 1s infinite;
    }
  }
}
@keyframes moveSide {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(5px);
  }
}
@keyframes moveMiddle {
  0% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-5px);
  }
}
.warning-text {
  text-overflow: ellipsis;
  width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  color: #0000ff;
}
table,td,tr,th{
  text-align: center;
  border: 1px solid #171717;
  border-collapse: collapse;
}
table{
  width:100%;
}
th{
  height: 40px;
}
</style>
